<template>
	<view class="flex-col page">
		<view class="flex-col relative group">
			<view class="shrink-0 section" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view>
			<view class="flex-row items-end relative group-person">
				<image class="avatar" :src="avatar" mode="circle"/>
				<text class="text">{{nickname}}</text>
			</view>
		</view>
		<scroll-view class="text-wrapper" scroll-y="true">
			<view class="text-container">
				<text class="font-regular text-white">{{introduction}}</text>
			</view>
		</scroll-view>
		<view class="flex-col group-rc">
			<button shape="round" class="button" @click="clickRewardBtn" >赞赏作者</button>
			<view class="flex-col group-contact">
				<text class="self-center font-regular text-gray">联系我</text>
				<view class="flex-row justify-between equal-division">
					<image class="equal-division-item" src="../assets/WeChat.png" @click="clickWeChatImg" />
					<image class="equal-division-item" src="../assets/Channels.png" @click="clickChannelsImg"/>
					<image class="equal-division-item" src="../assets/Douyin.png" @click="clickDouyinImg"/>
					<image class="equal-division-item" src="../assets/Xiaohongshu.png" @click="clickXiaohongshuImg"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//调用uniCloud前置步骤：在工程主目录右键创建uniCloud云开发环境，后关联uniCloud云服务空间使用
	const db = uniCloud.database();
	export default {
		components: {},
		props: {},
		data() {
			return {
				backgroundImage: '',
				avatar: '',
				nickname: '',
				introduction: '',
				qrCodeList: []
				//静态数据调试
				// backgroundImage: 'https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/417ff586e617f186604d2ba613308ccb.jpeg',
				// avatar: 'https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/avatar.png',
				// introduction: "Melodic John, a gifted guitarist who paints vibrant stories with his strings. With a seamless fusion of technique and emotion, Melodic John's music transcends genres, resonating deeply with listeners worldwide. From soulful ballads to electrifying solos, his melodies weave intricate narratives that evoke powerful feelings. With influences ranging from blues to rock, Melodic John's unique sound captures the essence of musical storytelling. With each note, he takes audiences on a journey, showcasing a harmonious blend of skill and passion. Prepare to be captivated by the artistry of Melodic John's guitar as he creates soul-stirring magic through his strings.",
				// nickname: 'Melodic John',
				// qrCodeList:["https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ask.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ext.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ask.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ext.dcloud.net.cn.png"]
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			async getData() {
				const res = await db.collection('product-person').where('nickname=="Melodic John"').get();
				const data = res.result.data[0];
				console.debug(data);
				this.avatar = data.avatar.url;
				this.backgroundImage = data.backgroud_image.url;
				this.nickname = data.nickname;
				this.introduction = data.introduction;
				this.qrCodeList = [data.wechat_image.url,data.channels_image.url,data.douyin_image.url,data.xiaohongshu_image.url];
			},
			clickRewardBtn(){
				//赞赏作者按钮的点击事件，可对接赞赏金额页面及支付功能
				uni.showToast({
					title:'点击了赞赏',
					duration:2000
				});
			},
			qrCodePreImage(current){
				uni.previewImage({
					urls: this.qrCodeList, 
					current: current,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			clickWeChatImg() {
				this.qrCodePreImage(0);
			},
			clickChannelsImg() {
				this.qrCodePreImage(1);
			},
			clickDouyinImg() {
				this.qrCodePreImage(2);
			},
			clickXiaohongshuImg() {
				this.qrCodePreImage(3);
			}
		}
	};
</script>

<style scoped lang="css">
	
	/* holo通用样式库 */
	@import '../common/holo.css';
	
	.page {
		background-color: #101010;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}
	
	.group {
		margin-top: -65.38rpx;
	}

	.section {
		border-radius: 0px 0px 38.46rpx 38.46rpx;
		background-size: cover;
		background-repeat: no-repeat;
		height: 40vh;
		background-position: center bottom;
	}

	.group-person {
		margin-top: -48.08rpx;
		padding: 0 61.54rpx;
	}

	.avatar {
		border: 2px solid #FFF;
		border-radius: 50%;
		width: 96.15rpx;
		height: 96.15rpx;
	}

	.text {
		margin-left: 46.15rpx;
		margin-bottom: 7.69rpx;
		color: #ffffff;
		font-size: 30.77rpx;
		font-family: Inter;
		line-height: 23.08rpx;
	}

	.text-wrapper {
		max-width: 95%;
		margin: 88.46rpx 20rpx 0 20rpx;
		background-color: #21212133;
		border-radius: 15rpx;
		overflow: hidden;
		height: 40vh;
		align-items: center;
		justify-content: flex-start;
	}

	.text-container {
		max-width: 90%;
		margin: 0 auto;
		padding: 10px;
	}

	.text-container:after {
		content: "";
		display: inline-block;
		width: 100%;
	}

	.font-regular {
		font-size: 26.92rpx;
		font-family: Inter;
	}

	.text-white {
		color: #ffffff;
		line-height: 38.46rpx;
		width: 569.23rpx;
	}

	.group-rc {
		padding: 86.54rpx 38.46rpx 30.77rpx;
	}

	.group-contact {
		padding: 53.85rpx 40.38rpx;
	}

	.text-gray {
		color: #949596;
		line-height: 25rpx;
	}

	.equal-division {
		margin-right: 5.77rpx;
		margin-top: 53.85rpx;
	}

	.equal-division-item {
		border-radius: 50%;
		width: 96.15rpx;
		height: 96.15rpx;
	}
	.button {
		padding: 34.62rpx 0px;
		margin-left: unset;
		margin-right: unset;
		border-radius: 192.31rpx;
		background-image: linear-gradient(101.9deg, #ea5c30 0%, #d93121 100%) !important;
		border: unset;
		height: 113.46rpx;
		background-size: cover;
		background-color: unset !important;
		background-repeat: no-repeat;
		color: #ffffff !important;
		font-family: Inter;
		font-size: 46.15rpx;
		line-height: 42.31rpx;
	}

	.button:after {
		border-radius: 384.62rpx;
		display: none;
	}
</style>